<!-- 用户详情修改页 -->
<template>
	<view class="block">
		<view class="item" style="justify-content: space-between;">
			<view class="" style="font-size: 14px; color: #676767;">
				修改头像:
			</view>
			<view style="display: flex; align-items: center;">
				<button class="butava" type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar">
					<u-avatar :src="userInfo.avatarUrl" shape="circle"></u-avatar></button>
			</view>
		</view>
		<view class="item">
			<view class="" style="font-size: 14px; color: #676767; width: 25%;">
				微信昵称:
			</view>
			<view style="display: flex; align-items: center; width: 75%;">
				<u--input searchIconColor="#676767" placeholderStyle="color:#989898" color="#676767"
					v-model="userInfo.nickName" placeholder="请输入微信昵称" />

			</view>
		</view>
		<view class="item">
			<view class="" style="font-size: 14px; color: #676767; width: 25%;">
				手机号:
			</view>
			<view style="display: flex; align-items: center; width: 75%;">
				<u--input searchIconColor="#676767" placeholderStyle="color:#989898" color="#676767"
					v-model="userInfo.phone" placeholder="请输入手机号" />

			</view>
		</view>
		<view class="item">
			<view class="" style="font-size: 14px; color: #676767; width: 25%;">
				所属区域:
			</view>
			<view style="display: flex; align-items: center; width: 75%; padding-left: 13px;" @click="showcomp=true">
				<u--input v-model="userInfo.communityName" :disabled='true' disabledColor='#fff'
					placeholder="请选择所属区域" border="none" suffixIcon="arrow-right"
					suffixIconStyle="color: #909399"></u--input>
		
			</view>
		</view>
		<view class="" style="width: 100%; display: flex; align-items: center; justify-content: center;">
			<view
				style="text-align: center; height: 40px;line-height: 40px; color: #000; width: 100%; margin-top: 10px; background-color: #fee539;	box-shadow: 3px 5px 5px -5px rgba(0, 0, 0, 0.75);"
				@click="submit">
				修改
			</view>
		</view>
		<view class="" @click="logout" style="margin-top: 10px; font-size: 13px; color: #05deff; width: 100%; text-align: center;">
			退出登录?
		</view>
		<u-picker :show="showcomp" ref="uPicker" @cancel='showcomp = false' keyName="label" :columns="columns"
			@confirm="confirm" @change="changeHandler"></u-picker>
	</view>
</template>

<script scoped>
	export default {
		props: {},
		components: {},
		data() {
			return {
				showcomp:false,
				columns:[],
				columnData:[],
				userInfo: {},
				temporaryUrl: ''
			}
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {
			const that = this
			this.$request(`/select/area`, 'get').then(
				res => {
					that.columns = res.data.data.columns
					that.columnData = res.data.data.columnData
					
			
				})
			this.userinfo()

		},
		methods: {
			confirm(e) {
				this.userInfo.communityId = e.value[1].id
				this.userInfo.communityName = e.value[1].label
				this.showcomp = false
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			logout(){
					uni.removeStorageSync('userinfokey');
					uni.reLaunch({
						url: '/pages/homepage/myhome'
					});
					uni.showToast({
						title: '退出登录成功',
					})
			},
			submit() {
				const that = this
				if (!/^1[3456789]\d{9}$/.test(this.userInfo.phone) && this.userInfo.phone) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return;
				}
				//只能上传本地图片不能上传https的已经上传了的图片
				if (this.temporaryUrl == this.userInfo.avatarUrl) {
					this.request()
				} else {
					this.$uploadimg(this.userInfo.avatarUrl)
						.then((url) => {
							that.userInfo.avatarUrl = url
							that.request()
						})
						.catch((err) => {
							console.error(err);
						});
				}

			},
			// 发送保存用户信息接口
			request() {
				const data = {
					nickName: this.userInfo.nickName,
					phone: this.userInfo.phone,
					avatarUrl: this.userInfo.avatarUrl,
					communityId: this.userInfo.communityId,
					communityName:this.userInfo.communityName,
					// communityId: 0,
					// communityName:''
				}
				this.$request(`/member/edit`, 'post', data).then(
					res => {
						const that = this
						uni.getStorage({
							key: 'userinfokey',
							success: function(res) {
								const user = {
									...res.data,
									...data
								}
								uni.setStorage({
									key: 'userinfokey',
									data: user,
									success: function() {
										console.log('存储用户信息成功');
									},
								});
							}
						});
						uni.reLaunch({
							url: '/pages/homepage/myhome'
						});
						uni.showToast({
							title: '修改成功',
						})
						this.userInfo = {}
					})
			},
			// 上传图片文件
			// uploadFile(filePath) {
			// 	const that = this
			// 	return new Promise((resolve, reject) => {
			// 		uni.uploadFile({
			// 			url: 'https://api.9hkj.net/capi/upload/image',
			// 			filePath: filePath,
			// 			header: {
			// 				Authorization: that.userInfo.token
			// 			},
			// 			name: 'file', // 后台接收文件的字段名
			// 			success: (res) => {
			// 				const url = JSON.parse(res.data).data;
			// 				resolve(url); // 将上传文件的URL传递给Promise对象
			// 			},
			// 			fail: (err) => {
			// 				reject(err);
			// 			}
			// 		});
			// 	});
			// },
			// 用户信息请求
			userinfo() {
				const that = this
				//从本地拿到用户详细信息
				uni.getStorage({
					key: 'userinfokey',
					success: function(res) {
						that.userInfo = res.data
						that.temporaryUrl = res.data.avatarUrl
					}
				});

			},
			// 图片选择回调临时地址
			chooseavatar(e) {
				this.userInfo.avatarUrl = e.detail.avatarUrl
			},

		}
	}
</script>

<style scoped lang="scss">
	.block {
		padding: 20px;
		height: 100vh;

		button {
			border: 0px solid #000;
		}

		.item {
			display: flex;
			align-items: center;
			padding: 0 10px;
			border: none;
			margin: 5px 0;
			height: 50px;
			border-radius: 5px;
			// border-bottom: 1px solid #a7a7a7;
			background-color: #ffffff;
			box-shadow: 3px 5px 5px -5px rgba(0, 0, 0, 0.75);

			.butava {
				height: 40px;
				width: 40px;
				padding: 0;
				border-radius: 20px;
			}

		}
		::v-deep .u-input {
			color: #747474;
			background-color: #ffffff !important;
		}
	}
</style>